<template>
    <el-container class="sys_role_container">
        <el-main>
            <el-card class="box-card">
                <el-row>
                    <el-radio-group v-model="radio_value">
                        <el-radio-button label="Word转pdf" @click.native="OpenDialog('Word转pdf',1,0,0,0)"></el-radio-button>
                        <el-radio-button label="Word转长图" @click.native="OpenDialog('Word转长图',1,1,0,0)"></el-radio-button>
                        <el-radio-button label="网页转长图" @click.native="OpenDialog('网页转长图',1,2,1,1)"></el-radio-button>
                        <el-radio-button label="Pdf转图片" @click.native="OpenDialog('Pdf转图片',1,3,2,2)"></el-radio-button>
                        <el-radio-button label="图片转pdf" @click.native="OpenDialog('图片转pdf',1,4,3,3)"></el-radio-button>
                        <el-radio-button label="Pdf合并" @click.native="OpenDialog('Pdf合并',2,5,2,2)"></el-radio-button>
                        <el-radio-button label="Pdf分割" @click.native="OpenDialog('Pdf分割',1,6,2,2)"></el-radio-button>
                        <el-radio-button label="Pdf加水印" @click.native="OpenDialog('Pdf加水印',1,7,2,2)"></el-radio-button>
                    </el-radio-group>
                </el-row>
            </el-card>

            <!--单文件转换-->
            <el-dialog :title="singleFileDialogOption.title"
               :visible.sync= "singleFileDialogOption.visible"
               width="30%"
               v-dialogDrag>
                <el-form ref="singleFileForm" :model="singleFileForm" label-width="100px">
                    <el-form-item label="上传文件" prop="fileName">
                        <el-upload class="upload-demo upload-demos"
                                   ref="importUpload"
                                   :action="singleFileApiUrl"
                                   :auto-upload="autoUpload"
                                   :headers="{token: token,account_set_sid: account_set_sid}"
                                   :show-file-list="false"
                                   :data="{bizPath: 'import', biz_type: 'import'}"
                                   :limit="1"
                                   :accept="singleFileType"
                                   :before-upload="handleBeforeSingleFileUpload"
                                   :on-change="handleSingleFileUploadChange"
                                   :on-error="handleUploadError"
                                   :on-success="handleSingleFileUploadSuccess"
                                   >
                            <el-input type="text" v-model="singleFileForm.fileName" placeholder="点击选择上传文件" readonly
                                      @click.native="handleClickSingleFileUpload"/>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="水印文字" v-if="boolMaterial">
                        <el-input type="text" v-model="singleFileForm.materialName" placeholder="请输入水印文字"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="singleFileDialogOption.visible = false">取 消</el-button>
                    <el-button type="primary" @click="submitSingleFileUpload" v-btnLoading>确 定</el-button>
                </div>
            </el-dialog>
            <!--多文件转换-->
            <el-dialog
                :title="multipleFilesDialogOption.title"
                :visible.sync= "multipleFilesDialogOption.visible"
                width="30%"
                v-dialogDrag>
                <el-form ref="multipleFilesForm" :model="multipleFilesForm" label-width="100px">
                    <el-form-item label="上传文件">
                        <el-upload
                            class="upload-demo"
                            drag
                            ref="upload"
                            :action="multipleFilesApiUrl"
                            :auto-upload="false"
                            :on-remove="handleMultipleFilesRemove"
                            :before-remove="beforeMultipleFilesRemove"
                            :on-change="beforeMultipleFilesUpload"
                            :on-success="handleMultipleFilesUploadSuccess"
                            :on-error="handleMultipleFilesUploaError"
                            :data="extraParam"
                            :headers="headers"
                            :limit="fileSizeLimit"
                            :file-list="fileList"
                            :on-exceed="handleMultipleFilesExceed"
                            :accept="fileType"
                            :show-file-list="true"
                            :multiple="true">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div slot="tip">
                                <!--@mouseenter="mouseEnter(index)" @mouseleave="mouseLeave" :class="{active:index==isActive}" -->
                                <div class="upload-file-name" v-for="(item,index) in fileList">
                                    {{item.name}}
                                    <!--  :class="{actives:index==isActive}"-->
                                    <em style="" class="upload-file-icon el-icon-delete" @click="del(index)"></em>
                                </div>
                            </div>
                            <div class="el-upload__tip" slot="tip">
                                <span style="color: #FE6D68;">*</span>
                                {{promptMessage}}
                            </div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="multipleFilesDialogOption.visible=false;fileList=[]">取 消</el-button>
                    <el-button type="primary" @click="submitMultipleFilesUpload" v-btnLoading>确 定</el-button>
                </div>
            </el-dialog>

            <!--Word转pdf-->
<!--            <el-dialog :title="wordToPdfDialogOption.title" :visible.sync= "wordToPdfDialogOption.visible" width="30%">-->
<!--                <el-form ref="wordToPdfForm" :model="wordToPdfForm" label-width="100px">-->
<!--                    <el-form-item label="上传文件" style="margin-bottom: 0;" >-->
<!--                        <el-upload class="upload-demo upload-demos" ref="importUpload"-->
<!--                                   :class="{'manual_upload': !autoUpload}"-->
<!--                                   :action="fileApiUrl" :auto-upload="autoUpload"-->
<!--                                   :headers="{token: token}" :show-file-list="false"-->
<!--                                   :data="{bizPath: 'import', biz_type: 'import'}"-->
<!--                                   :limit="1" accept=".doc,.docx"-->
<!--                                   :before-upload="handleBeforeUpload"-->
<!--                                   :on-change="handleUploadChange"-->
<!--                                   :on-error="handleUploadError"-->
<!--                                   :on-success="handleUploadSuccess"-->
<!--                                   >-->
<!--                            <el-input type="text" v-model="wordToPdfForm.fileName" placeholder="点击选择上传文件" readonly-->
<!--                                      @click.native="handleClickUpload"/>-->
<!--                        </el-upload>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--                <div slot="footer" class="dialog-footer">-->
<!--                    <el-button @click="wordToPdfDialogOption.visible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="submitUpload" v-btnLoading>确 定</el-button>-->
<!--                </div>-->
<!--            </el-dialog>-->
            <!--Word转长图-->
<!--            <el-dialog :title="wordToPictrueDialogOption.title" :visible.sync= "wordToPictrueDialogOption.visible" width="30%">-->
<!--                <el-form ref="wordToPictrueForm" :model="wordToPictrueForm" label-width="100px">-->
<!--                    <el-form-item label="上传文件" style="margin-bottom: 0;" >-->
<!--                        <el-upload class="upload-demo upload-demos" ref="importUpload"-->
<!--                                   :class="{'manual_upload': !autoUpload}"-->
<!--                                   :action="fileApiWordToPicUrl" :auto-upload="autoUpload"-->
<!--                                   :headers="{token: token}" :show-file-list="false"-->
<!--                                   :data="{bizPath: 'import', biz_type: 'import'}"-->
<!--                                   :limit="1" accept=".doc,.docx"-->
<!--                                   :before-upload="handleBeforeUpload"-->
<!--                                   :on-change="handleUploadWordToPicChange"-->
<!--                                   :on-success="handleUploadWordToPicSuccess"-->
<!--                                   :on-error="handleUploadError"-->
<!--                        >-->
<!--                            <el-input type="text" v-model="wordToPictrueForm.fileName" placeholder="点击选择上传文件" readonly-->
<!--                                      @click.native="handleClickUploadWordToPictrue"/>-->
<!--                        </el-upload>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--                <div slot="footer" class="dialog-footer">-->
<!--                    <el-button @click="wordToPictrueDialogOption.visible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="submitUploadWordToPic" v-btnLoading>确 定</el-button>-->
<!--                </div>-->
<!--            </el-dialog>-->
            <!--网页转长图-->
<!--            <el-dialog :title="htmlToPicDialogOption.title" :visible.sync= "htmlToPicDialogOption.visible" width="30%">-->
<!--                <el-form ref="htmlToPicForm" :model="htmlToPicForm" label-width="100px">-->
<!--                    <el-form-item label="网页转长图" style="margin-bottom: 0;">-->
<!--                        <el-upload class="upload-demo upload-demos" ref="importUpload"-->
<!--                                   :class="{'manual_upload': !autoUpload}"-->
<!--                                   :action="fileApiHtmlToPicUrl" :auto-upload="autoUpload"-->
<!--                                   :headers="{token: token}" :show-file-list="false"-->
<!--                                   :data="{bizPath: 'import', biz_type: 'import'}"-->
<!--                                   :limit="1" accept=".html"-->
<!--                                   :before-upload="handleBeforeUploadHtml"-->
<!--                                   :on-change="handleUploadHtmlToPicChange"-->
<!--                                   :on-error="handleUploadError"-->
<!--                                   :on-success="handleUploadHtmlToPicSuccess"-->
<!--                        >-->
<!--                            <el-input type="text" v-model="htmlToPicForm.fileName" placeholder="点击选择上传文件" readonly-->
<!--                                      @click.native="handleClickUploadHtmlToPic"/>-->
<!--                        </el-upload>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--                <div slot="footer" class="dialog-footer">-->
<!--                    <el-button @click="htmlToPicDialogOption.visible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="submitUploadHtmlToPic" v-btnLoading>确 定</el-button>-->
<!--                </div>-->
<!--            </el-dialog>-->
            <!--pdf转图片-->
<!--            <el-dialog :title="pdfToPicDialogOption.title" :visible.sync= "pdfToPicDialogOption.visible" width="30%">-->
<!--                <el-form ref="pdfToPicForm" :model="pdfToPicForm" label-width="100px">-->
<!--                    <el-form-item label="上传文件" style="margin-bottom: 0;" >-->
<!--                        <el-upload class="upload-demo upload-demos" ref="importUpload"-->
<!--                                   :class="{'manual_upload': !autoUpload}"-->
<!--                                   :action="fileApiPdfToPicUrl" :auto-upload="autoUpload"-->
<!--                                   :headers="{token: token}" :show-file-list="false"-->
<!--                                   :data="{bizPath: 'import', biz_type: 'import'}"-->
<!--                                   :limit="1" accept=".pdf"-->
<!--                                   :before-upload="handleBeforeUploadPdf"-->
<!--                                   :on-change="handleUploadPdfToPicChange"-->
<!--                                   :on-error="handleUploadError"-->
<!--                                   :on-success="handleUploadPdfToPicSuccess"-->
<!--                        >-->
<!--                            <el-input type="text" v-model="pdfToPicForm.fileName" placeholder="点击选择上传文件" readonly-->
<!--                                      @click.native="handleClickUploadPdfToPic"/>-->
<!--                        </el-upload>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--                <div slot="footer" class="dialog-footer">-->
<!--                    <el-button @click="pdfToPicDialogOption.visible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="submitUploadPdfToPic" v-btnLoading>确 定</el-button>-->
<!--                </div>-->
<!--            </el-dialog>-->
            <!--图片转pdf-->
<!--            <el-dialog :title="picToPdfDialogOption.title" :visible.sync= "picToPdfDialogOption.visible" width="30%">-->
<!--                <el-form ref="picToPdfForm" :model="picToPdfForm" label-width="100px">-->
<!--                    <el-form-item label="上传文件" style="margin-bottom: 0;" >-->
<!--                        <el-upload class="upload-demo upload-demos" ref="importUpload"-->
<!--                                   :class="{'manual_upload': !autoUpload}"-->
<!--                                   :action="fileApiPicToPdfUrl" :auto-upload="autoUpload"-->
<!--                                   :headers="{token: token}" :show-file-list="false"-->
<!--                                   :data="{bizPath: 'import', biz_type: 'import'}"-->
<!--                                   :limit="1" accept=".png"-->
<!--                                   :before-upload="handleBeforeUploadImage"-->
<!--                                   :on-change="handleUploadPicToPdfChange"-->
<!--                                   :on-error="handleUploadError"-->
<!--                                   :on-success="handleUploadPicToPdfSuccess"-->
<!--                        >-->
<!--                            <el-input type="text" v-model="picToPdfForm.fileName" placeholder="点击选择上传文件" readonly-->
<!--                                      @click.native="handleClickUploadPicToPdf"/>-->
<!--                        </el-upload>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--                <div slot="footer" class="dialog-footer">-->
<!--                    <el-button @click="picToPdfDialogOption.visible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="submitUploadPicToPdf" v-btnLoading>确 定</el-button>-->
<!--                </div>-->
<!--            </el-dialog>-->
            <!--Pdf分割-->
<!--            <el-dialog :title="splitPdfDialogOption.title" :visible.sync= "splitPdfDialogOption.visible" width="30%">-->
<!--                <el-form ref="splitPdfForm" :model="splitPdfForm" label-width="100px">-->
<!--                    <el-form-item label="上传文件" style="margin-bottom: 0;" >-->
<!--                        <el-upload class="upload-demo upload-demos" ref="importUpload"-->
<!--                                   :class="{'manual_upload': !autoUpload}"-->
<!--                                   :action="fileSplitPdfApiUrl" :auto-upload="autoUpload"-->
<!--                                   :headers="{token: token}" :show-file-list="false"-->
<!--                                   :data="{bizPath: 'import', biz_type: 'import'}"-->
<!--                                   :limit="1" accept=".pdf"-->
<!--                                   :before-upload="handleBeforeUploadPdf"-->
<!--                                   :on-change="handleUploadSplitChange"-->
<!--                                   :on-error="handleUploadError"-->
<!--                                   :on-success="handleUploadSplitPdfSuccess"-->
<!--                        >-->
<!--                            <el-input type="text" v-model="splitPdfForm.fileName" placeholder="点击选择上传文件" readonly-->
<!--                                      @click.native="handleClickUploadSplitPdf"/>-->
<!--                        </el-upload>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--                <div slot="footer" class="dialog-footer">-->
<!--                    <el-button @click="splitPdfDialogOption.visible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="submitUploadSplitPdf" v-btnLoading>确 定</el-button>-->
<!--                </div>-->
<!--            </el-dialog>-->
            <!--Pdf合并-->
            <!--            <el-dialog :title="mergePdfDialogOption.title" :visible.sync= "mergePdfDialogOption.visible" width="30%">-->
            <!--                <el-form ref="mergePdfForm" :model="mergePdfForm" label-width="100px">-->
            <!--                    <el-form-item label="上传文件">-->
            <!--                        <el-upload-->
            <!--                            class="upload-demo"-->
            <!--                            drag-->
            <!--                            ref="upload"-->
            <!--                            :action="fileMergePdfApiUrl"-->
            <!--                            :auto-upload="false"-->
            <!--                            :on-remove="handleRemove"-->
            <!--                            :before-remove="beforeRemove"-->
            <!--                            :on-change="beforeUpload"-->
            <!--                            :on-success="handleUploadMergePdfSuccess"-->
            <!--                            :on-error="handleUploadMergePdfError"-->
            <!--                            :data="extraParam"-->
            <!--                            :headers="headers"-->
            <!--                            :limit="fileSizeLimit"-->
            <!--                            :file-list="fileList"-->
            <!--                            :on-exceed="handleExceed"-->
            <!--                            :accept="fileType"-->
            <!--                            multiple>-->
            <!--                            <i class="el-icon-upload"></i>-->
            <!--                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
            <!--                            <div class="el-upload__tip" slot="tip">-->
            <!--                                <span style="color: #FE6D68;">*</span>-->
            <!--                                {{promptMessage}}-->
            <!--                            </div>-->
            <!--                        </el-upload>-->
            <!--                    </el-form-item>-->
            <!--                </el-form>-->
            <!--                <div slot="footer" class="dialog-footer">-->
            <!--                    <el-button @click="mergePdfDialogOption.visible = false">取 消</el-button>-->
            <!--                    <el-button type="primary" @click="submitUploadMergePdf" v-btnLoading>确 定</el-button>-->
            <!--                </div>-->
            <!--            </el-dialog>-->
            <!--Pdf加水印-->
<!--            <el-dialog :title="pdfAddWaterMarkDialogOption.title" :visible.sync= "pdfAddWaterMarkDialogOption.visible" width="30%">-->
<!--                <el-form ref="pdfAddWaterMarkForm" :model="pdfAddWaterMarkForm" label-width="100px">-->
<!--                    <el-form-item label="上传文件" style="margin-bottom: 0;" >-->
<!--                        <el-upload class="upload-demo upload-demos" ref="importUploadAddWaterMark"-->
<!--                                   :class="{'manual_upload': !autoUpload}"-->
<!--                                   :action="fileApiPdfAddWaterMarkUrl" :auto-upload="autoUpload"-->
<!--                                   :headers="{token: token}" :show-file-list="false"-->
<!--                                   :data="{bizPath: 'import', biz_type: 'import'}"-->
<!--                                   :limit="1" accept=".pdf"-->
<!--                                   :before-upload="handleBeforeUploadPdf"-->
<!--                                   :on-change="handleUploadPdfAddWaterMarkChange"-->
<!--                                   :on-error="handleUploadError"-->
<!--                                   :on-success="handleUploadPdfAddWaterMarkSuccess"-->
<!--                        >-->
<!--                            <el-input type="text" v-model="pdfAddWaterMarkForm.fileName" placeholder="点击选择上传文件" readonly-->
<!--                                      @click.native="handleClickUploadPdfAddWaterMark"/>-->
<!--                        </el-upload>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--                <div slot="footer" class="dialog-footer">-->
<!--                    <el-button @click="pdfAddWaterMarkDialogOption.visible = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="submitUploadPdfAddWaterMark" v-btnLoading>确 定</el-button>-->
<!--                </div>-->
<!--            </el-dialog>-->
        </el-main>
    </el-container>
</template>

<script>

import fileApi from "@common/api/fileApi";
import axios from "axios";

export default {
    name: "convert",
    data () {
        return {
            token: this.$store.state.accessToken.token,
            radio_value: '',
            boolMaterial: false,
            singleFileApiUrlArr: [
                window.configs.requestPrefix + '/api/wordConvertPdf.action',
                window.configs.requestPrefix + '/api/wordConvertPictrue.action',
                window.configs.requestPrefix + '/api/htmlConvertPictrue.action',
                window.configs.requestPrefix + '/api/pdfConvertPictrue.action',
                window.configs.requestPrefix + '/api/pictrueConvertPdf.action',
                window.configs.requestPrefix + '/api/mergePdfFiles.action',
                window.configs.requestPrefix + '/api/splitPdfFileOrder.action',
                window.configs.requestPrefix + '/api/pdfAddWaterMark.action',
            ],
            singleFileTypeArr: [
                '.doc,.docx',
                '.html',
                '.pdf',
                '.png',
            ],
            singleFileContentTypeArr: [
                ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
                ['text/html'],
                ['application/pdf'],
                ['image/png'],
            ],

            singleFileDialogOption: {
                title: '',
                visible: false,
            },
            singleFileForm: {},
            singleFileApiUrl: '',
            singleFileType: '',
            singleFileContentType: [],

            multipleFilesApiUrl: '',
            multipleFilesDialogOption: {
                title: '',
                visible: false,
            },
            multipleFilesForm: {},
            multipleFilesType: '',
            multipleFilesContentType: [],
            extraParam: {},
            fileList: [],
            headers: {
                'token': this.token,
            },
            //isActive: false,
            // excelContentType: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
            // wordContentType: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
            // pdfContentType: ['application/pdf'],
            // htmlContentType: ['text/html'],
            // imageContentType: ['image/png'],
            // fileApiUrl: window.configs.requestPrefix + '/api/wordConvertPdf.action',
            // fileApiWordToPicUrl: window.configs.requestPrefix + '/api/wordConvertPictrue.action',
            // fileApiHtmlToPicUrl: window.configs.requestPrefix + '/api/htmlConvertPictrue.action',
            // fileApiPdfToPicUrl: window.configs.requestPrefix + '/api/pdfConvertPictrue.action',
            // fileApiPicToPdfUrl: window.configs.requestPrefix + '/api/pictrueConvertPdf.action',
            // fileApiPdfAddWaterMarkUrl: window.configs.requestPrefix + '/api/pdfAddWaterMark.action',
            // fileSplitPdfApiUrl: window.configs.requestPrefix + '/api/splitPdfFileOrder.action',
            // fileMergePdfApiUrl: window.configs.requestPrefix + '/api/mergePdfFiles.action',
            // wordToPdfDialogOption: {
            //     visible: false,
            // },
            // wordToPdfForm: {
            //     fileName: '',
            // },
            // wordToPictrueDialogOption: {
            //     visible: false,
            // },
            // wordToPictrueForm: {
            //     fileName: '',
            // },
            // htmlToPicDialogOption:{
            //     visible: false,
            // },
            // htmlToPicForm: {
            //     fileName: '',
            // },
            // pdfToPicDialogOption: {
            //     visible: false,
            // },
            // pdfToPicForm: {
            //     fileName: '',
            // },
            // picToPdfForm: {
            //     fileName: '',
            // },
            // picToPdfDialogOption:{
            //     visible:false,
            // },
            // mergePdfDialogOption:{
            //   visible: false,
            // },
            // mergePdfForm: {
            //     fileName: '',
            // },
            // splitPdfDialogOption:{
            //   visible: false,
            // },
            // splitPdfForm: {
            //     fileName: '',
            // },
            // pdfAddWaterMarkDialogOption: {
            //     visible: false,
            // },
            // pdfAddWaterMarkForm: {
            //     fileName: '',
            // },
            /* 上传时附带的额外参数，返回是一个对象 */
            // extraParam: {},
            // /* 已上传的文件列表 */
            // fileList: [],
            // /* 请求头 */
            // headers: {
            //     'token': this.token,
            // },
            /* 是否在选取文件后立即进行上传 */
            // autoUpload: false,
        };
    },
    props: {
        autoUpload: {
            type: Boolean,
            default: false,
        },
        /* 上传框提示 */
        promptMessage: {
            default: '只能上传pdf文件',
            type: String
        },
        /* 文件上传路径 */
        uploadAction: {
            default: '',
            type: String
        },
        /* 文件类型 */
        fileType: {
            default: '.pdf',
            type: String
        },
        /* 限制最大文件上传数 */
        fileSizeLimit: {
            default: 6,
            type: Number
        }
    },
    mounted() {

    },
    methods: {
        OpenDialog(val,fileNum,apiUrl,fileType,contentType) {
            let $this = this;
            // 单文件
            if(fileNum == 1 || fileNum == "1"){
                $this.singleFileApiUrl = $this.singleFileApiUrlArr[apiUrl];
                $this.singleFileType = $this.singleFileTypeArr[fileType];
                $this.singleFileContentType = $this.singleFileContentTypeArr[contentType];
                $this.singleFileDialogOption = $.extend({},$this.singleFileDialogOption,{
                    title: val,
                    visible: true,
                });
                $this.boolMaterial = val == 'Pdf加水印' ? true : false;
                $this.singleFileForm.fileName = null;
            }
            // 多文件
            if(fileNum == 2 || fileNum == "2"){
                $this.multipleFilesApiUrl =  $this.singleFileApiUrlArr[apiUrl];
                $this.multipleFilesDialogOption = $.extend({},$this.multipleFilesDialogOption,{
                    title: val,
                    visible: true,
                });
            }
        },
        //单文件
        handleBeforeSingleFileUpload(file){
            let $this = this;
            if ($this.singleFileContentType.indexOf(file.type) === -1) {
                if($this.singleFileType == '.doc,.docx'){
                    $this.$message.error('请选择Word文件');
                }
                if($this.singleFileType == '.pdf'){
                    $this.$message.error('请选择Pdf文件');
                }
                if($this.singleFileType == '.png'){
                    $this.$message.error('请选择Png文件');
                }
                if($this.singleFileType == '.html'){
                    $this.$message.error('请选择Html文件');
                }
                return false;
            }
            return true;
        },
        handleSingleFileUploadChange(file, fileList){
            let $this = this;
            $this.singleFileForm = $.extend({}, $this.singleFileForm, {
                fileName: file.name,
            });
        },
        handleSingleFileUploadSuccess(res){
            let $this = this;
            $this.$refs.importUpload.clearFiles();
            $this.$refs['singleFileForm'].resetFields();
            $this.singleFileForm = $.extend({}, $this.singleFileForm, {
                fileName: null,
            });
            if(res.code == 0){
                $this.fileDownLoad(res);
            }
        },
        handleClickSingleFileUpload(){
            let $this = this;
            $this.singleFileForm = $.extend({}, $this.singleFileForm, {
                success: false,
                error: false,
            });
        },
        submitSingleFileUpload() {
            let $this = this;
            if ($this.$utils.isEmpty($this.singleFileForm.fileName)){
                $this.$message.error('请选择需要上传的文件');
                return;
            }
            $this.$refs.importUpload.submit();
            $this.singleFileDialogOption.visible = false;
        },
        handleUploadError(err, file, fileList){
            console.log(err);
        },
        fileDownLoad(res) {
            fileApi.browserDownloadFile({fileDownloadPath:res.data.downloadPath}, {headers:{'Content-Type':'application/json'}, responseType: 'blob'}, (result) => {
                const a = document.createElement('a');
                let filename = res.data.downloadFileName;
                const blob = new Blob([result], {type: res.contentType});
                const objectUrl = URL.createObjectURL(blob);
                a.setAttribute('href', objectUrl);
                a.setAttribute('download', filename);
                a.click();
            });
        },

        //多文件
        /* 文件列表移除文件成功时的钩子 */
        handleMultipleFilesRemove(file, fileList) {

        },
        /* 处理上传失败时的勾子 */
        handleMultipleFilesUploaError(err, file, fileList) {

        },
        /* 文件删除前的勾子 */
        beforeMultipleFilesRemove(file, fileList) {
            return this.$confirm(`确定移除"${file.name}"文件吗？`)
        },
        /* 上传文件之前的钩子 因设置了auto-upload为false，如果使用before-upload，虽有提示，但是还是会请求服务器*/
        beforeMultipleFilesUpload(file,fileList) {
            // 1、判断文件名是否重复，不允许上传相同文件
            let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
            if(existFile){
                fileList.pop();
                this.$message.warning(file.name+" 文件已存在！");
            }
            // 2、获取文件后缀
            fileList.forEach(everyFile => {
                const fileType = everyFile.name.substring(everyFile.name.lastIndexOf('.'))
                if(this.fileType.search(fileType) === -1){
                    fileList.pop();
                    this.$message.warning("上传文件的类型不正确"+"文件类型必须为" + this.fileType + '');
                }
            })
            this.fileList = fileList;
            console.log(this.fileList)
        },
        /* 文件超出个数限制时的钩子 */
        handleMultipleFilesExceed(files, fileList) {
            this.$message.error("只能上传5个")
        },
        /* 文件上传成功时的钩子 */
        handleMultipleFilesUploadSuccess(res, file, fileList) {
            let $this = this;
            $this.fileList = [];
            $this.$refs.upload.clearFiles();
        },
        /* 确定上传 */
        submitMultipleFilesUpload() {
            let data = new FormData()
            this.fileList.forEach(everyFile => {
                data.append("files",everyFile.raw)
            })
            const config = {
                headers: {
                    'token': this.token,
                }
            }
            axios.post(window.configs.requestPrefix + "/api/mergePdfFiles.action", data, config).then(function (response) {
                if(response.data.code == 0){
                    fileApi.browserDownloadFile({fileDownloadPath:response.data.data.downloadPath}, {headers:{'Content-Type':'application/json'}, responseType: 'blob'}, (result) => {
                        const a = document.createElement('a')
                        let filename = response.data.data.downloadFileName;
                        const blob = new Blob([result], {type: 'application/pdf;'})
                        const objectUrl = URL.createObjectURL(blob)
                        a.setAttribute('href', objectUrl)
                        a.setAttribute('download', filename)
                        a.click()
                    });
                }
            }).catch(function (error) {
                console.log(error);
            });
            this.multipleFilesDialogOption.visible = false;
            this.fileList = [];
        },
        //删除列表某一项
        del(index){
            this.fileList.splice(index,1);
        }
        // //鼠标移入
        // mouseEnter(index){
        //     this.isActive = index;
        // },
        // //鼠标移除
        // mouseLeave(){
        //     this.isActive = null;
        // },
        // OpenDialog(val) {
        //     let $this = this;
        //     if(val == "Word转pdf"){
        //         $this.singleFileApiUrl = window.configs.requestPrefix + '/api/wordConvertPdf.action';
        //         $this.singleFileType = '.doc,.docx';
        //         $this.singleFileContentType = ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
        //         $this.singleFileDialogOption = $.extend({},$this.singleFileDialogOption,{
        //             title: 'Word转pdf',
        //             visible: true,
        //         });
        //     }
        //     if(val == "Word转长图"){
        //         $this.singleFileApiUrl = window.configs.requestPrefix + '/api/wordConvertPictrue.action';
        //         $this.singleFileType = '.doc,.docx';
        //         $this.singleFileContentType = ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
        //         $this.singleFileDialogOption = $.extend({},$this.singleFileDialogOption,{
        //             title: 'Word转长图',
        //             visible: true,
        //         });
        //     }
        //     if(val == "网页转长图"){
        //         $this.singleFileApiUrl = window.configs.requestPrefix + '/api/htmlConvertPictrue.action';
        //         $this.singleFileType = '.html';
        //         $this.singleFileContentType = ['text/html'];
        //         $this.singleFileDialogOption = $.extend({},$this.singleFileDialogOption,{
        //             title: '网页转长图',
        //             visible: true,
        //         });
        //     }
        //     if(val == "Pdf转图片"){
        //         $this.singleFileApiUrl = window.configs.requestPrefix + '/api/pdfConvertPictrue.action';
        //         $this.singleFileType = '.pdf';
        //         $this.singleFileContentType = ['application/pdf'];
        //         $this.singleFileDialogOption = $.extend({},$this.singleFileDialogOption,{
        //             title: '网页转长图',
        //             visible: true,
        //         });
        //     }
        //     if(val == "图片转pdf"){
        //         $this.singleFileApiUrl = window.configs.requestPrefix + '/api/pictrueConvertPdf.action';
        //         $this.singleFileType = '.png';
        //         $this.singleFileContentType = ['image/png'];
        //         $this.singleFileDialogOption = $.extend({},$this.singleFileDialogOption,{
        //             title: '图片转pdf',
        //             visible: true,
        //         });
        //     }
        //     if(val == "Pdf合并"){
        //         $this.multipleFilesApiUrl = window.configs.requestPrefix + '/api/mergePdfFiles.action';
        //         $this.multipleFilesDialogOption = $.extend({},$this.multipleFilesDialogOption,{
        //             title: 'Pdf合并',
        //             visible: true,
        //         });
        //     }
        //     if(val == "Pdf分割"){
        //         $this.singleFileApiUrl = window.configs.requestPrefix + '/api/splitPdfFileOrder.action';
        //         $this.singleFileType = '.pdf';
        //         $this.singleFileContentType = ['application/pdf'];
        //         $this.singleFileDialogOption = $.extend({},$this.singleFileDialogOption,{
        //             title: 'Pdf分割',
        //             visible: true,
        //         });
        //     }
        //     if(val == "Pdf加水印"){
        //         $this.singleFileApiUrl = window.configs.requestPrefix + '/api/pdfAddWaterMark.action';
        //         $this.singleFileType = '.pdf';
        //         $this.singleFileContentType = ['application/pdf'];
        //         $this.singleFileDialogOption = $.extend({},$this.singleFileDialogOption,{
        //             title: 'Pdf加水印',
        //             visible: true,
        //         });
        //     }
        // },

        // fileDownLoad(res, type) {
        //     fileApi.browserDownloadFile({fileDownloadPath:res.data.downloadPath}, {headers:{'Content-Type':'application/json'}, responseType: 'blob'}, (result) => {
        //         const a = document.createElement('a')
        //         let filename = res.data.downloadFileName;
        //         const blob = new Blob([result], {type: type})
        //         const objectUrl = URL.createObjectURL(blob)
        //         a.setAttribute('href', objectUrl)
        //         a.setAttribute('download', filename)
        //         a.click()
        //     });
        // },
        // OpenDialog(val) {
        //     let $this = this;
        //     if(val == "Word转pdf"){
        //         $this.wordToPdfDialogOption = $.extend({}, $this.wordToPdfDialogOption, {
        //             title: 'Word转pdf',
        //             visible: true,
        //         });
        //     }
        //     if(val == "Word转长图"){
        //         $this.wordToPictrueDialogOption = $.extend({}, $this.wordToPictrueDialogOption, {
        //             title: 'Word转长图',
        //             visible: true,
        //         });
        //     }
        //     if(val == "网页转长图"){
        //         $this.htmlToPicDialogOption = $.extend({}, $this.htmlToPicDialogOption, {
        //             title: '网页转长图',
        //             visible: true,
        //         });
        //     }
        //     if(val == "Pdf转图片"){
        //         $this.pdfToPicDialogOption = $.extend({}, $this.pdfToPicDialogOption, {
        //             title: '网页转长图',
        //             visible: true,
        //         });
        //     }
        //     if(val == "图片转pdf"){
        //         $this.picToPdfDialogOption = $.extend({}, $this.picToPdfDialogOption, {
        //             title: '图片转pdf',
        //             visible: true,
        //         });
        //     }
        //     if(val == "Pdf合并"){
        //         $this.mergePdfDialogOption = $.extend({}, $this.mergePdfDialogOption, {
        //             title: 'Pdf合并',
        //             visible: true,
        //         });
        //     }
        //     if(val == "Pdf分割"){
        //         $this.splitPdfDialogOption = $.extend({}, $this.splitPdfDialogOption, {
        //             title: 'Pdf分割',
        //             visible: true,
        //         });
        //     }
        //     if(val == "Pdf加水印"){
        //         $this.pdfAddWaterMarkDialogOption = $.extend({}, $this.pdfAddWaterMarkDialogOption, {
        //             title: 'Pdf加水印',
        //             visible: true,
        //         });
        //     }
        // },
        // handleBeforeUpload(file) {
        //     if (this.wordContentType.indexOf(file.type) === -1) {
        //         this.$message.error('请选择Word文件');
        //         return false;
        //     }
        //     return true;
        // },
        // handleUploadChange(file, fileList) {
        //     this.wordToPdfForm = $.extend({}, this.wordToPdfForm, {
        //         fileName: file.name,
        //     });
        // },
        // submitUpload() {
        //     let _this = this;
        //     if (this.$utils.isEmpty(_this.wordToPdfForm.fileName)){
        //         this.$message.error('请选择需要上传的文件');
        //         return;
        //     }
        //     _this.$refs.importUpload.submit();
        //     _this.wordToPdfDialogOption.visible = false;
        // },
        // handleClickUpload() {
        //     this.wordToPdfForm = $.extend({}, this.wordToPdfForm, {
        //         success: false,
        //         error: false,
        //     });
        // },
        // handleUploadSuccess(res) {
        //     let $this = this;
        //     $this.$refs.importUpload.clearFiles()
        //     this.wordToPdfForm = $.extend({}, $this.wordToPdfForm, {
        //         fileName: "",
        //     });
        //     if(res.code == 0){
        //         $this.fileDownLoad(res,'application/pdf;');
        //     }
        // },
        // handleUploadError(err, file, fileList){
        //     // $this.$refs['importUpload'].clear();
        //     console.log(err);
        // },


        // handleClickUploadWordToPictrue() {
        //     this.wordToPictrueForm = $.extend({}, this.wordToPictrueForm, {
        //         success: false,
        //         error: false,
        //     });
        //     // this.$refs.importUpload.clearFiles();
        // },
        // handleUploadWordToPicChange(file, fileList) {
        //     this.wordToPictrueForm = $.extend({}, this.wordToPictrueForm, {
        //         fileName: file.name,
        //     });
        // },
        // handleUploadWordToPicSuccess(res) {
        //     let $this = this;
        //     $this.$refs.importUpload.clearFiles()
        //     $this.wordToPictrueForm = $.extend({}, $this.wordToPictrueForm, {
        //         fileName: "",
        //     });
        //     if(res.code == 0){
        //         $this.fileDownLoad(res, 'application/zip');
        //     }
        //     // $this.$refs['importUpload'].clear();
        // },
        // submitUploadWordToPic() {
        //     let _this = this;
        //     if (this.$utils.isEmpty(_this.wordToPictrueForm.fileName)){
        //         this.$message.error('请选择需要上传的文件');
        //         return;
        //     }
        //     _this.$refs.importUpload.submit();
        //     _this.wordToPictrueDialogOption.visible = false;
        // },


        // handleBeforeUploadPdf(file){
        //     if (this.pdfContentType.indexOf(file.type) === -1) {
        //         this.$message.error('请选择pdf文件');
        //         return false;
        //     }
        //     return true;
        // },
        // handleUploadPdfToPicChange(file){
        //     this.pdfToPicForm = $.extend({}, this.pdfToPicForm, {
        //         fileName: file.name,
        //     });
        // },
        // handleUploadPdfToPicSuccess(res){
        //     let $this = this;
        //     $this.$refs.importUpload.clearFiles();
        //     this.pdfToPicForm = $.extend({}, $this.pdfToPicForm, {
        //         fileName: "",
        //     });
        //     if(res.code == 0){
        //         $this.fileDownLoad(res, 'application/pdf;');
        //     }
        // },
        // handleClickUploadPdfToPic() {
        //     this.pdfToPicForm = $.extend({}, this.pdfToPicForm, {
        //         success: false,
        //         error: false,
        //     });
        //     // this.$refs.importUpload.clearFiles();
        // },
        // submitUploadPdfToPic(){
        //     let $this = this;
        //     if ($this.$utils.isEmpty($this.pdfToPicForm.fileName)){
        //         $this.$message.error('请选择需要上传的文件');
        //         return;
        //     }
        //     $this.$refs.importUpload.submit();
        //     $this.pdfToPicDialogOption.visible = false;
        // },


        // handleClickUploadPdfAddWaterMark() {
        //     this.pdfAddWaterMarkForm= $.extend({}, this.pdfAddWaterMarkForm, {
        //         success: false,
        //         error: false,
        //     });
        // },
        // handleUploadPdfAddWaterMarkChange(file){
        //     this.pdfAddWaterMarkForm = $.extend({}, this.pdfAddWaterMarkForm, {
        //         fileName: file.name,
        //     });
        // },
        // submitUploadPdfAddWaterMark() {
        //     let $this = this;
        //     if ($this.$utils.isEmpty($this.pdfAddWaterMarkForm.fileName)){
        //         $this.$message.error('请选择需要上传的文件');
        //         return;
        //     }
        //     $this.$refs.importUploadAddWaterMark.submit();
        //     $this.pdfAddWaterMarkDialogOption.visible = false;
        // },
        // handleUploadPdfAddWaterMarkSuccess(res){
        //     let $this = this;
        //     $this.$refs.importUploadAddWaterMark.clearFiles();
        //     this.pdfAddWaterMarkForm = $.extend({}, $this.pdfAddWaterMarkForm, {
        //         fileName: "",
        //     });
        //     if(res.code == 0){
        //         $this.fileDownLoad(res,'application/pdf;')
        //     }
        // },
        //
        //
        // handleBeforeUploadHtml(file){
        //     if (this.htmlContentType.indexOf(file.type) === -1) {
        //         this.$message.error('请选择html文件');
        //         return false;
        //     }
        //     return true;
        // },
        // handleUploadHtmlToPicChange(file){
        //     this.htmlToPicForm = $.extend({}, this.htmlToPicForm, {
        //         fileName: file.name,
        //     });
        // },
        // handleUploadHtmlToPicSuccess(res){
        //     let $this = this;
        //     this.$refs.importUpload.clearFiles();
        //     this.htmlToPicForm = $.extend({}, $this.htmlToPicForm, {
        //         fileName: "",
        //     });
        //     if(res.code == 0){
        //         $this.fileDownLoad(res, 'application/html;');
        //     }
        // },
        // handleClickUploadHtmlToPic() {
        //     this.htmlToPicForm = $.extend({}, this.htmlToPicForm, {
        //         success: false,
        //         error: false,
        //     });
        // },
        // submitUploadHtmlToPic(){
        //     let _this = this;
        //     if (this.$utils.isEmpty(_this.htmlToPicForm.fileName)){
        //         this.$message.error('请选择需要上传的文件');
        //         return;
        //     }
        //     _this.$refs.importUpload.submit();
        //     _this.htmlToPicDialogOption.visible = false;
        // },
        //
        //
        // handleUploadSplitChange(file) {
        //     this.splitPdfForm = $.extend({}, this.splitPdfForm, {
        //         fileName: file.name,
        //     });
        // },
        // handleUploadSplitPdfSuccess(res){
        //     let $this = this;
        //     $this.$refs.importUpload.clearFiles()
        //     $this.splitPdfForm = $.extend({}, $this.splitPdfForm, {
        //         fileName: "",
        //     });
        //     if(res.code == 0){
        //         $this.fileDownLoad(res,'application/pdf;');
        //     }
        // },
        // handleClickUploadSplitPdf() {
        //     this.splitPdfForm = $.extend({}, this.splitPdfForm, {
        //         success: false,
        //         error: false,
        //     });
        //     // this.$refs.importUpload.clearFiles();
        // },
        // submitUploadSplitPdf(){
        //     let _this = this;
        //     if (this.$utils.isEmpty(_this.splitPdfForm.fileName)){
        //         this.$message.error('请选择需要上传的文件');
        //         return;
        //     }
        //     _this.$refs.importUpload.submit();
        //     _this.splitPdfDialogOption.visible = false;
        // },


        // handleBeforeUploadImage(file){
        //     if (this.imageContentType.indexOf(file.type) === -1) {
        //         this.$message.error('请选择png文件');
        //         return false;
        //     }
        //     return true;
        // },
        // handleUploadPicToPdfChange(file){
        //     this.picToPdfForm = $.extend({}, this.picToPdfForm, {
        //         fileName: file.name,
        //     });
        // },
        // handleUploadPicToPdfSuccess(res){
        //     let $this = this;
        //     $this.$refs.importUpload.clearFiles();
        //     this.picToPdfForm = $.extend({}, $this.picToPdfForm, {
        //         fileName: "",
        //     });
        //     if(res.code == 0){
        //         this.fileDownLoad(res, 'application/pdf;');
        //     }
        // },
        // handleClickUploadPicToPdf(){
        //     let _this = this;
        //     this.picToPdfForm = $.extend({}, this.picToPdfForm, {
        //         fileName: "",
        //     });
        // },
        // submitUploadPicToPdf(){
        //     let _this = this;
        //     if (this.$utils.isEmpty(_this.picToPdfForm.fileName)){
        //         this.$message.error('请选择需要上传的文件');
        //         return;
        //     }
        //     _this.$refs.importUpload.submit();
        //     _this.picToPdfDialogOption.visible = false;
        // },


        // /* 文件列表移除文件成功时的钩子 */
        // handleRemove(file, fileList) {
        //
        // },
        // /* 处理上传失败时的勾子 */
        // handleUploadMergePdfError(err, file, fileList) {
        //
        // },
        // /* 文件删除前的勾子 */
        // beforeRemove(file, fileList) {
        //     return this.$confirm(`确定移除"${file.name}"文件吗？`)
        // },
        // /* 上传文件之前的钩子 因设置了auto-upload为false，如果使用before-upload，虽有提示，但是还是会请求服务器*/
        // beforeUpload(file,fileList) {
        //     // 1、判断文件名是否重复，不允许上传相同文件
        //     let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
        //     if(existFile){
        //         fileList.pop()
        //         // this.warningNotify(file.name+" 文件已存在！")
        //     }
        //     // 2、获取文件后缀
        //     fileList.forEach(everyFile => {
        //         const fileType = everyFile.name.substring(everyFile.name.lastIndexOf('.'))
        //         if(this.fileType.search(fileType) === -1){
        //             fileList.pop()
        //             // this.warningNotify("上传文件的类型不正确"+"文件类型必须为" + this.fileType + '')
        //         }
        //     })
        //     this.fileList = fileList;
        // },
        // /* 文件超出个数限制时的钩子 */
        // handleExceed(files, fileList) {
        //
        // },
        // /* 文件上传成功时的钩子 */
        // handleUploadMergePdfSuccess(res, file, fileList) {
        //     let $this = this
        //     $this.$refs.upload.clearFiles();
        // },
        // /* 确定上传 */
        // submitUploadMergePdf() {
        //     let data = new FormData()
        //     this.fileList.forEach(everyFile => {
        //         data.append("files",everyFile.raw)
        //     })
        //     const config = {
        //         headers: {
        //             'token': this.token,
        //         }
        //     }
        //     axios.post(window.configs.requestPrefix + "/api/mergePdfFiles.action", data, config).then(function (response) {
        //        if(response.data.code == 0){
        //            fileApi.browserDownloadFile({fileDownloadPath:response.data.data.downloadPath}, {headers:{'Content-Type':'application/json'}, responseType: 'blob'}, (result) => {
        //                const a = document.createElement('a')
        //                let filename = response.data.data.downloadFileName;
        //                const blob = new Blob([result], {type: 'application/pdf;'})
        //                const objectUrl = URL.createObjectURL(blob)
        //                a.setAttribute('href', objectUrl)
        //                a.setAttribute('download', filename)
        //                a.click()
        //            });
        //        }
        //     }).catch(function (error) {
        //         console.log(error);
        //     });
        //     this.mergePdfDialogOption.visible = false;
        // }
    }

}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.upload-demos /deep/ .el-upload--text{
    background-color: #fff;
    border: 0px dashed #d9d9d9;
    border-radius: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 25px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.upload-demos /deep/ .el-input__inner{
    height: 25px;
}
.sys_role_container{
    height: 100%;
    .buttons {
        margin: 0 0 10px 0;
    }
    .ceshi{
        max-height: 500px !important;
        z-index: 1000;
    }
}
.el-upload__tip{
    font-weight: bold;
    font-size: 14px;
}
.upload-file-name{
    padding: 0 8px;
    background-color: #FFF;
    color: #409EFF;
    font-size: 12px;
    border-bottom: #FFF solid 1px;
    animation: enter-left 0.3s ease-in;
}
.upload-file-name:hover{
    background: #409EFF;
    color: #FFF;  // 选中字体背景跟着改变
    .upload-file-icon {
        color: red;
    }
}
.upload-file-icon {
    float: right;
    display: block;
    line-height: 24px;
}

//&.active {
//    background: #409EFF;
//    color: #FFF;  // 选中字体背景跟着改变
//}
//&.actives {
//    color: red;  // 选中字体背景跟着改变
//}
</style>
